<template>
  <div class="pie-chart-wrap">
    <div :id="pieId" ref="pieChart" class="pie-chart"></div>
    <!--    <label v-for="(item, idx) in data" :key="idx + '_name'" :class="`data-name item-data${idx + 1}`">{{item.name}}</label>-->
    <!--    <label v-for="(item, idx) in data" :key="idx + '_value'" :class="`data-value item-data${idx + 1}`">{{item.value}}</label>-->
  </div>
</template>
<script>
import { resizeChart, pieOptions } from "@/assets/js/echartOptions.js";
import { LegendData } from "./echartsConfig/legend";
export default {
  name: "PieChart",
  props: {
    // 是否是大一点的饼图
    isLarge: {
      type: Boolean,
      default: false,
    },
    // 饼图id
    pieId: {
      type: String,
      default: "pieChart",
    },
    // 饼图的颜色
    colors: {
      type: Array,
      default: () => [
        "#35a3fc",
        "#1459d9",
        "#108707",
        "#29dbf8",
        "#fcbd32",
        "#fa5356",
        "#ee76fc",
        "#89f480",
        "#f38053",
        "#25b5b0",
      ],
    },
    // 是否显示表表经过
    isShowTooltip: {
      type: Boolean,
      default: true,
    },
    // 间隔颜色
    borderColor: {
      type: String,
      default: "rgba(10, 29, 49, 1)",
    },
    // 饼图数据
    data: {
      type: Array,
      default: () => [],
    },
    // 饼图数据名
    name: {
      type: String,
      default: "",
    },
    // 饼图半径
    radius: {
      type: Array,
      default: () => ["25%", "45%"],
    },
    // 图例
    ...LegendData,
  },
  data() {
    return {
      pieChart: null,
      options: null,
    };
  },
  watch: {
    data(val) {
      this.options.data = val;
      this.pieChart.setOption(pieOptions({ ...this.options }));
    },
  },
  mounted() {
    this.pieChart = this.$echarts.init(
      document.querySelector(`#${this.pieId}`)
    );
    this.options = {
      name: this.name,
      radius: this.radius,
      data: this.data,
      borderColor: this.borderColor,
      colors: this.colors,
      isShowTooltip: this.isShowTooltip,
      // 图例
      legend: this.legend,
      orient: this.orient,
      legendTop: this.legendTop,
      legendLeft: this.legendLeft,
      icon: this.icon,
      itemGap: this.itemGap,
      legendBack: this.legendBack,
    };
    this.pieChart.setOption(pieOptions({ ...this.options }));
    resizeChart(this.pieChart);
  },
};
</script>
<style lang="less" scoped>
.pie-chart-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  &.large-pie-wrap {
  }

  &.normal-pie-wrap {
  }

  .pie-chart {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
  }

  .data-name {
    position: absolute;
    color: #fff;
    font-family: youshebiaoti;
    font-weight: 12px;
    font-weight: 400;
    transform: scale(0.9);

    &.item-data1 {
      left: 16px;
      top: 17px;
    }

    &.item-data2 {
      right: 14px;
      top: 17px;
    }

    &.item-data3 {
      right: 14px;
      bottom: 8px;
    }

    &.item-data4 {
      left: 16px;
      bottom: 8px;
    }
  }

  .data-value {
    position: absolute;
    font-family: youshebiaoti;

    &.item-data1 {
      left: 18px;
      top: 48px;
      color: #6cafff;
    }

    &.item-data2 {
      right: 16px;
      top: 48px;
      color: #72d4c0;
    }

    &.item-data3 {
      right: 16px;
      bottom: 40px;
      color: #ec9dee;
    }

    &.item-data4 {
      left: 18px;
      bottom: 40px;
      color: #f8d68e;
    }
  }
}
</style>
